<template>
	<view class="report-container">
		<view class="report-section section08">
			<view class="content">
				<view class="top">
					前10供应商
				</view>
				<view class="table-container">
					<view class="line">
						<view class="text" v-for="(item,j) in ['名称','销售金额','发票张数','发票张数占比','金额占比']" :key="j">
							<view class="box">
								{{ item }}
							</view>
						</view>
					</view>
					<view class="line" v-for="(item,j) in QI.supplierList">
						<view class="text">
							<view class="box">
								{{ item.salerName }}
							</view>
						</view>
						<view class="text">
							<view class="box">
								{{ item.totalAmount }}
							</view>
						</view>
						<view class="text">
							<view class="box">
								{{ item.totalInvoiceCount }}
							</view>
						</view>
						<view class="text">
							<view class="box">
								{{ item.rateInvoiceCount }}
							</view>
						</view>
						<view class="text">
							<view class="box">
								{{ item.rateSalerAmount }}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="report-section section08">
			<view class="content">
				<view class="top">
					头部供应商司法和关联预警
				</view>
				<view class="table-container">
					<view class="line">
						<view class="text" v-for="(item,j) in ['供应商企业名称','被执行条数','总涉案金额']" :key="j">
							<view class="box">
								{{ item }}
							</view>
						</view>
					</view>
			
					<view class="line" v-for="(item,j) in QI.headSupplierJustizsache">
						<!-- {{QI.headSupplierJustizsache}} -->
						<view class="text">
							<view class="box">
								{{ item.companyName }}
							</view>
						</view>
						<view class="text">
							<view class="box">
								{{ item.undertakerNum }}
							</view>
						</view>
						<view class="text">
							<view class="box">
								{{ item.execMoney }}
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		com41,
		com42,
		makeCom4
	} from '@/utils/poster.js'
	export default {
		name: "qy-jcxx",
		props: {
			QI: {
				required: true,
				type: Object
			}
		},
		data() {
			return {
				com41,
				com42
			}
		},
		mounted() {
			makeCom4(this.QI)
		},
		methods() {
			makeCom4
		}

	}
</script>

<style lang="scss">
	.report-container {
		scroll-behavior: smooth;
		min-height: 600px;
		background: url("@/static/images/bg.png") no-repeat 0 0, #F5F6FC;
		padding: 100rpx 10rpx;
		box-sizing: border-box;

		.report-section {
			margin-top: 10rpx;
			width: 100%;
			background-size: 100% auto;
			background-color: #f0f0f0;
		}

		.section08 {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;

			.content {
				padding-top: 10rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;

				.top {
					margin: 10rpx;
				}
			}

			.table-container {
				.line {
					display: flex;
					min-height: 56rpx;
					align-items: center;
					padding: 14rpx 0;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(148, 148, 156, 0.40);
				}

				.line:last-of-type {
					border-bottom: none;
				}

				.text {
					color: #001850;
					flex-shrink: 0;
					text-align: center;
					font-size: 20rpx;
					margin: 0 auto;
				}

				.line:first-of-type {
					font-weight: bold;
				}

				.line:nth-child(odd) {
					color: #001850;
					background-color: rgba(136, 173, 255, 0.1);
				}

				.line:nth-child(even) {
					background-color: rgba(136, 173, 255, 0.05);
				}
			}
		}

	}
</style>